<template>
    <div class="flexBox">
      <div class="prc1">
        <div class="box">
          1
        </div>
        <div class="box">
          2
        </div>
        <div class="box">
          3
        </div>
        <div class="box">
          4
        </div>
        <div class="box">
          5
        </div>
          <div class="box">
          6
        </div>
        <div class="box">
        7
        </div>
        <div class="box">
        8
        </div>
        <div class="box">
        9
        </div>
      </div>
      <div class="prc2">
        <div class="homes">
          <div class="home">首页</div>
          <div class="home">首页</div>
          <div class="home">首页</div>
          <div class="home">首页</div>
        </div>
        <div class="more">
          其他导航
        </div>
      </div>
      <div class="prc3">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="prc4">
        <div class="box1">
        <div class="box"></div>
        <div class="box"></div>
        </div>
        <div class="box2">
        <div class="box"></div>
        <div class="box"></div>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
interface Pos{
  x: number,
  y: number
}
@Options({ components: {} })
export default class FlexBox extends Vue {
  public rect: DOMRect|null = null;
  public isBoxTouch=false;
  public current: Pos ={ x: 0, y: 0 };
  public mounted() {
    this.rect =  (this.$el as HTMLElement).getBoundingClientRect();
    console.log(this.rect);
  }
}
</script>

<style lang="postcss" scoped>
.flexBox{
  width: 100%;
  height: 100%;
  .prc1{
    width: 400px;
    height: 400px;
    background-color: purple;
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items: flex-end;
    margin-bottom:10px;
    .box{
        width: 100px;
        height: 100px;
        background-color: orange;
        /* line-height:100px;
        text-align:center; */
        margin-right: 20px;
        margin-bottom: 20px;
        /* display:flex;
        justify-content:center;
        align-items:center; */
      }
  }
  .prc2{
    width: 100%;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: space-around;
    .homes{
      display: flex;
      justify-content:flex-start;
      align-items:center;
      .home{
        box-sizing: border-box;
        width: 25%;
        padding: 10px;
        display: flex;
        justify-content:center;
        align-items: center;
      }
    }
    .more{
        display: flex;
        justify-content:center;
        align-items: center;
    }
  }
  .prc3{
    width: 99%;
    height: 220px;
    border: 2px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    .box{
      box-sizing: border-box;
      width: 16%;
      height: 80px;
      margin: 2%;
      background-color: green;

    }
  }
  .prc4{
    margin-top: 10px;
    width: 300px;
    height: 300px;
    border:2px solid red;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    .box1{
      width: 100%;
      height: 100px;
      display:flex;
      justify-content: space-between;
    .box{
      width: 50px;
      height: 50px;
      border-radius:50%;
      background-color: green;
    }
    }

    .box2{
      display:flex;
      justify-content: space-between;
      align-items: flex-end;
      .box{
      width: 50px;
      height: 50px;
      border-radius:50%;
      background-color: green;
    }
    }
  }
}
</style>
